import type React from 'react';
import { useState } from 'react';
import type { Point2D, Vector2D } from '../../types';
import { MatrixTransform } from '../MatrixTransform/MatrixTransform';
import styles from './MatrixDemo.module.less';

/**
 * 矩阵变换演示页面
 */
export const MatrixDemo: React.FC = () => {
  const [activeTab, setActiveTab] = useState<'demo' | 'docs'>('demo');

  // 预定义一些测试数据
  const initialPoints: Point2D[] = [
    { x: -50, y: 50 },
    { x: 50, y: 50 },
    { x: 50, y: -50 },
    { x: -50, y: -50 },
    { x: 0, y: 0 },
  ];

  const initialVectors: Vector2D[] = [
    { x: 30, y: 0 },
    { x: 0, y: -30 },
    { x: 20, y: -20 },
  ];

  return (
    <div className={styles.demo}>
      <header className={styles.header}>
        <h1>二维矩阵变换演示</h1>
        <p>使用矩阵进行平移、旋转、缩放和倾斜变换的可视化演示</p>

        <div className={styles.tabs}>
          <button
            type="button"
            className={activeTab === 'demo' ? styles.active : ''}
            onClick={() => setActiveTab('demo')}
          >
            演示
          </button>
          <button
            type="button"
            className={activeTab === 'docs' ? styles.active : ''}
            onClick={() => setActiveTab('docs')}
          >
            文档
          </button>
        </div>
      </header>

      {activeTab === 'demo' && (
        <div className={styles.content}>
          <MatrixTransform
            initialPoints={initialPoints}
            initialVectors={initialVectors}
            width={800}
            height={600}
            showControls={true}
            showMatrix={true}
            showHistory={true}
          />
        </div>
      )}

      {activeTab === 'docs' && (
        <div className={styles.docs}>
          <div className={styles.section}>
            <h2>矩阵变换基础</h2>
            <p>二维变换使用3x3矩阵表示，但通常简化为6个参数的2x3矩阵：</p>
            <pre>{`
[ a  c  e ]
[ b  d  f ]
[ 0  0  1 ]
            `}</pre>
            <p>其中：</p>
            <ul>
              <li>
                <strong>a, d</strong>: 缩放和旋转分量
              </li>
              <li>
                <strong>b, c</strong>: 倾斜分量
              </li>
              <li>
                <strong>e, f</strong>: 平移分量
              </li>
            </ul>
          </div>

          <div className={styles.section}>
            <h2>基本变换</h2>

            <h3>平移变换</h3>
            <pre>{`
[ 1  0  tx ]
[ 0  1  ty ]
[ 0  0  1  ]
            `}</pre>

            <h3>旋转变换</h3>
            <pre>{`
[ cosθ  -sinθ  0 ]
[ sinθ   cosθ  0 ]
[  0      0    1 ]
            `}</pre>
            <p>
              注意：这是标准笛卡尔坐标系中的旋转变换矩阵。在前端绘制时，由于y轴向下，实际显示效果会有所不同。
            </p>

            <h3>缩放变换</h3>
            <pre>{`
[ sx  0   0 ]
[ 0  sy   0 ]
[ 0   0   1 ]
            `}</pre>

            <h3>倾斜变换</h3>
            <pre>{`
[ 1   tan(θy)  0 ]
[ tan(θx)  1   0 ]
[  0    0     1 ]
            `}</pre>
            <p>
              注意：这是标准笛卡尔坐标系中的倾斜变换矩阵。在前端绘制时，由于y轴向下，实际显示效果会有所不同。
            </p>
          </div>

          <div className={styles.section}>
            <h2>使用方法</h2>
            <ol>
              <li>
                <strong>添加点</strong>: 点击画布添加测试点
              </li>
              <li>
                <strong>设置变换原点</strong>: Shift+点击设置变换中心点
              </li>
              <li>
                <strong>选择变换类型</strong>:
                在控制面板选择平移、旋转、缩放或倾斜
              </li>
              <li>
                <strong>调整参数</strong>: 设置变换的具体参数值
              </li>
              <li>
                <strong>应用变换</strong>: 点击"应用变换"按钮执行变换
              </li>
              <li>
                <strong>撤销操作</strong>: 使用"撤销"按钮回退到上一步
              </li>
            </ol>
          </div>

          <div className={styles.section}>
            <h2>颜色说明</h2>
            <ul>
              <li>
                <span style={{ color: 'blue' }}>●</span> 蓝色: 原始点
              </li>
              <li>
                <span style={{ color: 'red' }}>●</span> 红色: 变换后的点
              </li>
              <li>
                <span style={{ color: 'green' }}>→</span> 绿色: 原始向量
              </li>
              <li>
                <span style={{ color: 'orange' }}>→</span> 橙色: 变换后的向量
              </li>
              <li>
                <span style={{ color: 'purple' }}>●</span> 紫色: 变换原点
              </li>
              <li>
                <span style={{ color: 'magenta' }}>●</span> 洋红色: 变换后的原点
              </li>
            </ul>
          </div>
        </div>
      )}
    </div>
  );
};

export default MatrixDemo;
